<template>
  <common-dialog
    ref="dialog"
    width="1000px"
    title="发票详情"
    :inDialog="inDialog"
    :data="data"
    @closed="onClosed"
  >
    <common-form
      ref="form"
      text-mode
      label-width="100px"
    >
      <el-divider>发票信息</el-divider>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="发票ID">{{data.id}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发票金额">￥{{data.invoiceAmount}}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="原始名称">
            <el-tag
              v-if="data.isDeleted"
              type="danger"
              style="margin-right:5px"
            >已作废</el-tag>
            <el-tag
              v-if="data.id!=data.mergerId"
              type="warning"
              style="margin-right:5px"
            >已合并</el-tag>{{ data.name }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="英文名称">{{ data.enName }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="中文名称">{{ data.zhName }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="原始地址">{{ data.address }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="英文地址">{{ data.enAddress }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="中文地址">{{ data.zhAddress }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="电话">{{ data.tel }}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="创建时间">{{ data.creationTime }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最后更新时间">{{ data.lastModificationTime }}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item
            label="同步旧ICP"
            class="no-border"
          >
            <el-tag
              type="success"
              v-if="data.syncOldIcp"
            >已同步</el-tag>
            <el-tag
              type="danger"
              v-else
            >未同步</el-tag>
            <span
              class="c-link"
              @click="openOldIcpDetail"
              v-if="data.syncOldIcp"
              style="margin-left:10px"
            >查看</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审批状态">
            {{data.examineStateName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="拥有人">
            {{data.ownerUserName}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider>账单信息</el-divider>
      <el-table></el-table>
    </common-form>
    <template slot="footer">
      <el-button @click="getData(data.id)">刷新</el-button>
      <el-button
        :disabled="!data.nuoNuoUrl"
        @click="openNuoNuoInvoice"
        type="primary"
      >查看诺诺发票</el-button>
    </template>
    <detail-dialog
      ref="detailDialog"
      in-dialog
    ></detail-dialog>
  </common-dialog>
</template>
<script>
import commonDialog from "@/components/common/dialog";
import commonForm from "@/components/common/form";
import api from "@/api/fam/invoice";

export default {
  props: {
    inDialog: {
      type: Boolean,
      default: false
    },
  },
  // mixins: [detailsDialogMixin],
  components: {
    commonDialog,
    commonForm
  },
  data() {
    return {
      syncEsLoading: false,
      syncIcpLoading: false,
      resetNameLoading: false,
      repairLoading: false,
      data: {
        id: "",
        name: "",
        mergerId: "",
        code: "",
        enName: "",
        nuoNuoUrl: "",
      },
      api,
    };
  },
  created() {
    this.$options.components.detailDialog = () => import('./detailDialog')
  },
  methods: {
    openDetail(id) {
      this.$refs.dialog.open().then(() => {
        this.getData(id);
      });
    },
    getData(id) {
      this.$refs.dialog.loading(true);
      api.getDetail(id).then((res) => {
        this.$refs.dialog.loading(false);
        if (res.code != 0) {
          return;
        }
        this.data = res.data;
      });
    },
    onClosed() {
      this.$refs.commonForm.reset();
    },
    syncCustomerToEs() {
      this.syncEsLoading = true;
      api.syncCustomersToEs({ ids: [this.data.id] }).then(() => {
        this.syncEsLoading = false;
      });
    },
    syncCustomerToIcp() {
      this.syncIcpLoading = true;
      api.syncCustomersToIcp({ ids: [this.data.id] }).then(() => {
        this.syncIcpLoading = false;
      });
    },
    resetNameUniqueValue() {
      this.resetNameLoading = true;
      api.resetNameUniqueValue({ ids: [this.data.id] }).then((res) => {
        this.resetNameLoading = false;
      });
    },
    repairExamineStatus() {
      this.repairLoading = true;
      api.repairExamineStatus({ ids: [this.data.id] }).then((res) => {
        this.repairLoading = false;
      });
    },
    openMainCustomer() {
      this.$refs.detailDialog.openDetail(this.data.mergerId);
    },
    openOldIcpDetail() {
      this.$refs.oldIcpDetailDialog.openDetail(this.data.id);
    },
    relieveMerger() {

    },
    openNuoNuoInvoice() {
      window.open(this.data.nuoNuoUrl);
    }
  },
};
</script>